<template>
  <div>
    <el-menu :default-active="defaultPath.name" class="sidebar" ref="menuRef" :router=true >
      <el-menu-item index="0" route="/homepage">首页</el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <span>社团展示</span>
        </template>
        <el-menu-item index="clublist">社团列表</el-menu-item>
        <el-menu-item index="clubview">社团风采</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <span>我的社团</span>
        </template>
        <el-menu-item index="myclubjoin">我参与的社团</el-menu-item>
        <el-menu-item v-if="[0,1,2].includes(permission)" index="myclubmanage">我管理的社团</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <span>个人中心</span>
        </template>
        <el-menu-item index="person">个人信息</el-menu-item>
        <el-menu-item index="noticepage">通知公告</el-menu-item>
        <el-menu-item v-if="[2,3].includes(permission)" index="myworks">我的作品</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <span>社团管理</span>
        </template>
        <el-menu-item v-if="[0,1,2].includes(permission)" index="transapproval">社团事务审批</el-menu-item>
        <el-menu-item index="clubadd">添加社团</el-menu-item>
        <el-menu-item v-if="[0,1].includes(permission)" index="clubedit">编辑社团</el-menu-item>
        <el-menu-item v-if="[0,1,2].includes(permission)" index="memberinfo">人员信息</el-menu-item>
        <el-menu-item v-if="[0,1].includes(permission)" index="recommend">推荐作品</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import userStore from '@/stores/store';

const defaultPath = useRoute();
const permission = userStore().getPermission;

</script>

<style scoped>
.sidebar{
  width: 210px;
  height: 90vh;
  margin-left: 10px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
</style>